<template>
	<view class="order-pool-container">
		<!-- 顶部分类栏 -->
		<view class="category-bar">
			<view v-for="category in categories" :key="category.value" class="category-item"
				:class="{ active: params.queryDayConditions === category.value }"
				@click="changeCategory(category.value)">
				<text class="category-text">{{ category.label }}</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view v-if="loading" class="loading-container">
				<uni-load-more :status="'loading'" :content-text="{ loadingText: '加载中...' }"></uni-load-more>
			</view>

			<view v-else-if="orders.length === 0" class="empty-container">
				<text class="empty-text">暂无订单</text>
			</view>

			<view v-else class="order-card" v-for="order in orders" :key="order.orderId">
				<!-- 订单头部 -->
				<view class="order-header">
					<view class="order-type">
						<text class="type-tag">{{ orderTypeMap.get(order.orderType) }}</text>
					</view>
					<view class="order-info">
						<text class="time-text">{{ formatTime(order.serviceStartTime) }}</text>
						<!-- <text class="amount-text">¥{{ order.price || '0.00' }}</text> -->
					</view>
				</view>

				<!-- 路线信息 -->
				<view class="route-info">
					<!-- 出发地 -->
					<view class="location-item">
						<view class="location-icon start-icon"></view>
						<view class="location-content">
							<text class="location-text">{{ order.departureAddress }}</text>
						</view>
					</view>

					<!-- 连接线 -->
					<view class="connector"></view>

					<!-- 目的地 -->
					<view class="location-item">
						<view class="location-icon end-icon"></view>
						<view class="location-content">
							<text class="location-text">{{ order.destinationAddress }}</text>
						</view>
					</view>
				</view>
				<!-- <view class="flight-info">
					<text class="flight-label">司机价格：</text>
					<text class="flight-number">{{ order.driverShowPrice }}</text>
				</view> -->
				<!-- 航班号信息 -->
				<view v-if="order.flightNumber" class="flight-info">
					<text class="flight-label">航班号：</text>
					<text class="flight-number">{{ order.flightNumber }}</text>
				</view>
				<view v-if="order.trainNumber" class="flight-info">
					<text class="flight-label">车次号：</text>
					<text class="flight-number">{{ order.trainNumber }}</text>
				</view>
				<!-- 操作按钮 -->
				<view class="order-actions">
					<button class="action-btn route-btn" @click="viewRoute(order)">查看路线</button>
					<button class="action-btn grab-btn" @click="grabOrder(order)"
						:disabled="grabbingOrder === order.orderId">
						{{ grabbingOrder === order.orderId ? '抢单中...' : '抢单' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { queryPageOrderPool, grabOrder as apiGrabOrder } from '@/api/index.js'
import { orderTypeMap } from '@/utils/constants'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { formatTime } from '@/utils'

// 分类数据
const categories = [
	{ label: '全部', value: 0 },
	{ label: '今天', value: 1 },
	{ label: '明天', value: 2 },
	{ label: '后天', value: 3 }
]
const params = reactive({
	queryDayConditions: 0,
	pageNum: 1,
	pageSize: 10,
})

const total = ref(0)

const orders = ref([])
const loading = ref(false)
const isRefresh = ref(false)
const grabbingOrder = ref(null)

onMounted(() => {
	// 初始加载订单
	loadOrders()
})

// 切换分类
const changeCategory = (value) => {
	if (params.queryDayConditions == value) return
	params.queryDayConditions = value
	// 重置并重新加载订单
	params.pageNum = 1
	orders.value = []
	loadOrders()
}

// 加载订单
const loadOrders = async () => {
	loading.value = true
	try {
		// 调用API获取订单数据
		const response = await queryPageOrderPool(params)
		if (isRefresh.value) {
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
			isRefresh.value = false
			uni.stopPullDownRefresh()
		}
		if (response.code === 200) {
			const newOrders = response.data.list || []
			if (params.pageNum === 1) {
				orders.value = newOrders
			} else {
				orders.value = [...orders.value, ...newOrders]
			}
			total.value = response.data.total

		} else {
			uni.showToast({
				title: '获取订单失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取订单失败:', error)
		uni.showToast({
			title: '网络异常，请稍后重试',
			icon: 'none'
		})
	} finally {
		isRefresh.value = false
		uni.stopPullDownRefresh()
		loading.value = false
	}
}

// 加载更多订单
const loadMoreOrders = () => {
	if (orders.value.length >= total.value) {
		uni.showToast({
			title: '没有更多订单了',
			icon: 'none'
		})
		return
	}
	params.pageNum++
	loadOrders()
}

// 抢单
const grabOrder = async (order) => {
	// 防止重复点击
	if (grabbingOrder.value) return

	grabbingOrder.value = order.orderUuid
	try {
		// 构建抢单参数
		const params = {
			orderUuid: order.orderUuid
		}
		// 调用抢单API
		const response = await apiGrabOrder(params)

		if (response.code === 200) {
			uni.showToast({
				title: response.message || '抢单成功',
				icon: 'success'
			})

			// 从列表中移除已抢的订单
			orders.value = orders.value.filter(item => item.orderId !== order.orderId)
		} else {
			uni.showToast({
				title: response.msg || '抢单失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('抢单失败:', error)
		uni.showToast({
			title: '网络异常，请稍后重试',
			icon: 'none'
		})
	} finally {
		grabbingOrder.value = null
	}
}

onPullDownRefresh(() => {
	// 重置分页参数
	isRefresh.value = true
	params.pageNum = 1
	orders.value = []
	// 刷新订单列表
	loadOrders()
})
// 加载更多订单
onReachBottom(() => {
	loadMoreOrders()
})

// 查看路线
const viewRoute = (order) => {
	// 在实际应用中，这里可以跳转到地图页面
	uni.showToast({
		title: '查看路线功能待实现',
		icon: 'none'
	})
}
</script>

<style scoped>
.order-pool-container {
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 分类栏样式 */
.category-bar {
	background-color: #fff;
	display: flex;
	padding: 0 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.category-item {
	flex: 1;
	padding: 20rpx 0;
	text-align: center;
	position: relative;
}

.category-text {
	font-size: 32rpx;
	color: #666;
}

.category-item.active .category-text {
	color: #007AFF;
	font-weight: bold;
}

.category-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 50%;
	height: 4rpx;
	background-color: #007AFF;
}

/* 订单列表样式 */
.order-list {
	padding: 20rpx;
	flex: 1;
}

.loading-container,
.empty-container {
	padding: 60rpx 0;
	text-align: center;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
}

/* 订单项样式 */
.order-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 订单头部 */
.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.order-type {
	background-color: #e6f7ff;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.type-tag {
	font-size: 24rpx;
	color: #007AFF;
}

.order-info {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.time-text {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 4rpx;
}

.amount-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #e64340;
}

/* 路线信息 */
.route-info {
	position: relative;
	padding-left: 40rpx;
	margin-bottom: 30rpx;
}

.location-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.location-icon {
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	margin-right: 16rpx;
	margin-top: 6rpx;
}

.start-icon {
	background-color: #07c160;
}

.end-icon {
	background-color: #ff4d4f;
}

.location-content {
	flex: 1;
}

.location-text {
	font-size: 32rpx;
	color: #333;
	line-height: 48rpx;
}

.connector {
	position: absolute;
	left: 12rpx;
	top: 24rpx;
	width: 2rpx;
	height: 60rpx;
	background-color: #e8e8e8;
}

/* 航班信息 */
.flight-info {
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
}

.flight-label {
	font-size: 26rpx;
	color: #999;
	margin-right: 8rpx;
}

.flight-number {
	font-size: 26rpx;
	color: #333;
	font-weight: 500;
	background-color: #f5f5f5;
	padding: 4rpx 16rpx;
	border-radius: 16rpx;
}

/* 操作按钮 */
.order-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.action-btn {
	padding: 0 32rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 28rpx;
	border-radius: 35rpx;
}

.route-btn {
	background-color: #fff;
	color: #007AFF;
	border: 1rpx solid #007AFF;
}

.grab-btn {
	background-color: #007AFF;
	color: #fff;
	border: none;
}

.grab-btn[disabled] {
	background-color: #ccc;
}

/* 加载更多 */
.load-more {
	padding: 20rpx 0;
	text-align: center;
}
</style>
